<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引入组件库 -->
    <script src="./js/vue.js"></script>
    <script src="./plugins/elementui/index.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/qs.js"></script>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <div class="login-container">
        <div class="loginBox">
            <el-form ref="loginForm" :model="formData" label-width="80px" :rules="rules">
                <div class="title-container">
                    <div class="logoInfo clearfix">
                        <em class="logo"></em>
                    </div>
                </div>
                <div>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="formData.username" type="text" placeholder="请输入用户名" autocomplete="off"
                                  @keydown.enter.native="login"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" type="password" placeholder="请输入密码" autocomplete="off"
                              @keydown.enter.native="login"></el-input>
                </el-form-item>
                <el-button style="width:100%;margin-bottom:30px;" @click="login" type="primary">登录</el-button>
            </el-form>
        </div>
    </div>
</div>
</body>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            formData: {

            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输出密码', trigger: 'blur'}
                ],
            }
        },
        methods: {
            login() {
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'POST',
                            headers: {'content-type': 'application/x-www-form-urlencoded'},
                            data: Qs.stringify(vue.formData),   // 用 qs 将js对象转换为字符串 'name=edward&age=25'
                            url: '/login.do'
                        }).then((resp) => {
                            if (resp.data.flag) {
                                location.href = '/pages/main.html'
                            } else {
                                this.$message.error(resp.data.message);
                            }
                        }).catch((error) => {
                            this.$message.error(error.message);
                        });
                    } else {
                        return;
                    }
                });

                /*axios.post("/login.do",this.formData).then((res) => {
                    if (res.data.flag) {
                        location.href = '/pages/main.html'
                    } else {
                        this.$message.error(res.data.message);
                    }
                });*/
            }
        }

    })
</script>
</html>
